<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #666;
        }

        .denglu {
            width: 618px;
            height: 364px;
            background-color: #fff;
            border: 1px solid black;
            margin: 100px auto;
            position: relative;
        }

        input {
            display: block;
            width: 258px;
            height: 18px;
            padding: 10px 0 10px 10px;
            margin: 20px auto;
        }

        span {
            color: #666;
            font-size: 12px;
        }
    </style>
</head>

<body>

    <div class="denglu">
        <div style="font-size: 20px;
         color: #333;
         margin-bottom: 16px ;margin: 20px auto;text-align: center;margin-top: 40px;">账号密码登录</div>
        <div style="font-size: 16px;
         color: #666; 
         text-align: center;text-align: center;">
            推荐使用手机QQ扫码登录，防止盗号。
        </div>
        <form action="">
            <input type="text" class="dlzh">
            <input type="text" class="dlmm">
            <div type="submit" class="btndl"
                style="cursor:pointer;height: 38px;width: 268px;color: #fff;line-height: 38px;padding: 0; font-size: 17px;background-color: rgb(143, 228, 15) ;text-align: center;margin: 0 auto; border: none;">
                登&nbsp; 录 </div>
        </form>
        <div style="height: 20px;position: absolute;bottom: 10px;right: 10px;">
            <a href=""><span>忘记密码</span></a>
            <i style="font-style: normal; font-size: 12px;color: grey;">丨</i>
            <a href="zhuceqq.html"> <span>注册新账号</span></a>
            <i style="font-style: normal; font-size: 12px;color: grey;">丨</i>
            <a href=""> <span>意见反馈</span></a>
        </div>
    </div>
</body>
<script src="./libs/jquery.js"></script>
<script>
    let a = 0;
    //  正则判断账号框是否正确 正确把a设为1
    $(".dlzh")[0].oninput = function () {
        var reg = /^[1-9]\d{5,11}$/;

        if (reg.test($(".dlzh").val())) {
            console.log("duile");
            a = 1
        } else {
            console.log("cuole");
            a = 0
        }
    };


    //   console.log(a);
    let b = 0;
    $(".dlmm")[0].oninput = function () {
        var reg = /^[a-z0-9]{1,11}$/;

        if (reg.test($(".dlmm").val())) {
            //  console.log("mad");
            b = 1
        } else {
            //  console.log("mac");
            b = 0
        }
    }
    // 绑定提交按钮事件
    $(".btndl").click(function () {
        // 如果账号密码格式都对，执行下面
        if (a === 1 && b === 1) {
            // console.log(a);
            $.ajax({
                url: "http://localhost:3000/api1",
                data: {
                    type: "login",
                    username: $(".dlzh").val(),
                    password: $(".dlmm").val()
                },
                success: res => {
                    var res = JSON.parse(res)
                    console.log(res);

                    if (res.code === 1) {
                        // console.log(res.data);
                        //    console.log("登陆成功");
                        localStorage.setItem("token", "ok");
                        localStorage.setItem("un", res.data)
                        //    判断是否为从设定地址跳转到登录，是的话登陆成功返回原页面，并清空状态，否则跳转到主页
                        if (localStorage.getItem("dl") == 1) {
                            history.back()
                            localStorage.setItem("dl", "")
                        } else {
                            location.href = "./daojucheng.html"
                        }


                    }
                    if (res.code === 0) {
                        console.log("密码错误");
                        alert("密码错误")
                        $(".dlmm").val("");
                        $(".dlmm")[0].focus();
                    }
                    if (res.code === 2) {
                        console.log("用户名不存在");
                        console.log("用户名不存在");
                        alert("用户名不存在")

                    }
                }
            })
        }
        if (a === 1 && b !== 1) {
            // console.log(a);
            // console.log(b);
            alert("请输入密码")
        }
        if (a !== 1 && b !== 1) {
            alert("请输入正确的qq号")
        }

        // 如果账号密码格式不对，分情况执行下面
        // else{
        //     if(a!==1){
        //       alert("请输入正确的qq号");  
        //     }if(a!==1){
        //         alert("请输入正确的qq号")
        //     }else{
        //         alert("请输入正确的密码，不小于3位不大于11位")
        //     }                      
        //  }
    });

    //   $(".btndl").click(function(){
    //        $.ajax(
    //            {
    //                url:"http://localhost:3000/api1",
    //                data:{
    //                    type:"login",
    //                    username:$(".dlzh").val(),
    //                    password:$(".dlmm").val()
    //                },
    //                success:res=>{

    //                }
    //            })


    //     });

    // 给按钮添加点点击样式
    $(".btndl").mousedown(function () {
        $(".btndl").css("color", "red")

    });
    $(".btndl").mouseup(function () {
        $(".btndl").css("color", "#fff")

    })
</script>

</html>